<template>
    <div class="box">
        <div class="fixedbox">
            <div class="head_top">
                <div class="top_list" :class='id==m.id?"seclted":""' v-for='(m,idx) in ArrList' @click='changeTitle(m.id)'>{{m.name}}</div>
            </div>
        </div>
        <div style="overflow:scroll;" class='list_box'>
            <mt-loadmore bottomPullText='加载更多'  :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore" >
                <list :flage='true' :list='list'></list>
            </mt-loadmore>
        </div>
    </div>
</template>

<script>
    const imgutil = require('../../common/until.js')
    import { Loadmore,Indicator, Toast } from 'mint-ui'
    import list from '../compontents/list'
    export default {
        name: 'footmark',
        data () {
            return {
               id: 0,
               list: [],
               allLoaded: false,
               pageIndex: 1,
               pageSize: 20,
               ArrList: [{name:'收藏',id:0},{name:'足迹',id:1}]
            }
        },
        created: function () {
            this.init(this.id,false)
        },
        methods: {
            init: function(id,bool){
            	const that = this
                Indicator.open()
                if(id == 0){
                    that.$http('/pinhuoitem/item/GetItemVisitList',{pageIndex:that.pageIndex,pageSize:that.pageSize},function(res){
                        Indicator.close()
                        if(res.Result){
                            if(res.Data.Items.length == that.pageSize){
                                that.pageIndex++
                                that.allLoaded = false
                            }else{
                                that.allLoaded = true
                            }
                            res.Data.Items.map(item => {
                                item.Cover = imgutil.getUrl(item.Cover, 300)
                            })
                            that.list = that.list.concat(res.Data.Items)
                            if(bool){
                                that.$refs.loadmore.onBottomLoaded()
                            }
                        }
                    },'GET')
                }else if(id == 1){
                    that.$http('/pinhuobuyer/item/GetFavoriteItem',{pageIndex:that.pageIndex,pageSize:that.pageSize},function(res){
                        Indicator.close()
                        if(res.Result){
                            if(res.Data.length == that.pageSize){
                                that.pageIndex++
                                that.allLoaded = false
                            }else{
                                that.allLoaded = true
                            }
                            res.Data.map(item => {
                                item.Cover = imgutil.getUrl(item.Cover, 300)
                            })
                            that.list = that.list.concat(res.Data)
                            if(bool){
                                that.$refs.loadmore.onBottomLoaded()
                            }
                        }
                    },'GET')
                }
            	
            },
            changeTitle: function(id){
                if(this.id == id){
                    return
                }
            	this.id = id
                this.allLoaded = false
                this.pageIndex = 1
                this.list = []
                this.init(id,false)
            },
            loadBottom: function(){
                this.init(this.id,true)
            }
        },
        components:{
            Loadmore,
            list
        }
    }
</script>


<style scoped>
    .box{height: 100vh;background-color: #f5f5f5;}
    .fixedbox{width: 100%;height: 42px;position: relative;}
    .head_top{position: fixed;width: 100%;max-width: 720px;background-color: #fff;height: 42px;line-height: 42px;top: 0;display: flex;flex-direction:row;justify-content:space-around;z-index: 1;}
    .top_list{text-align:center;height: 40px;line-height: 40px;text-align: center;font-size: 12px;position: relative;border-bottom:2px solid #fff;color: #000;}
    .seclted{border-bottom:2px solid #d52831;color:#d52831;}    
</style>
